<template>
  <div>
    <DialogStyle>
      <el-dialog
        :visible="isShow"
        width="750px"
        title="区域详情"
        @close="closeFn"
        @open="openFn"
      >
        <el-form :model="rowList" class="Info">
          <el-form-item label="区域名称：">
            {{ rowList.name }}
          </el-form-item>
          <el-form-item label="包含点位：">
            <el-table
              :data="InfoList"
              border
              style="width: 70%"
            >
              <el-table-column
                type="index"
                label="序号"
                width="90"
              />
              <el-table-column
                prop="name"
                label="点位名称"
              />
              <el-table-column
                prop="vmCount"
                label="设备数量"
                width="130"
              />
            </el-table>
          </el-form-item>
        </el-form>
      </el-dialog>
    </DialogStyle>

  </div>
</template>

<script>
import { nodeSearch } from '@/api'
export default {
  props: {
    rowList: {
      type: Object,
      default: () => {}
    },
    isShow: {
      type: Boolean,
      default: false
    },
    formList: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      InfoList: []
    }
  },
  methods: {
    // 关闭弹窗前的回调
    closeFn() {
      this.$emit('closeDialogFn')
    },
    async openFn() {
      const res = await nodeSearch({ regionId: this.rowList.id,
        pageIndex: 1,
        pageSize: 10 })
      console.log(res, '1111111111111111')
      this.InfoList = res.currentPageRecords
    }
  }
}
</script>

<style>
.Info{
  padding-left: 100px ;
}
</style>
